/**
 *
 * @Author:   tiannanyihao
 * @Date:     2018-09-17 11:00
 * @Profile:  LFMoreCell
 * @Project:  MeiTuan

 * @Description: 更多模块中, 自定义cell组件
 *
 */

import React, {Component} from 'react';
import {
	Platform,
	StyleSheet,
	View,
	Image,
	Text,
	Switch,
	TouchableOpacity,
} from 'react-native';
//**************************************** import ****************************************//
import {LFImages} from "../../src/img";
import {ScreenFixH, ScreenW, ScreenFixW} from "../../Common/Tools";
import {LFColors} from "../../Common/Tools/LFColors";

//**************************************** 组件部分 ****************************************//
export default class MoreCell extends Component {

	static defaultProps = {
		title: 'cell标题', // cell左侧描述文字
		rightTitle: '', //cell右侧描述文字
		isSwitch: false,  //是否切换为选择模式
		isBottomLine: false,  //是否有底部线条
		marginTohnum: 0, //自定义cell组件marginTop的距离
		clickBlock: {}    //自定义cell的回调对象,
	}

	constructor(props) {
		super(props);
		this.state = {
			switchValue: false,
			switchDisabled: false,
		};
	}


	render() {
		return (

			<View style={{marginTop: this.props.marginTohnum}}>
				{/*主要内容view*/}
				<TouchableOpacity onPress={this.props.clickBlock}>
					<View style={styles.cellContainer}>
						<Text style={styles.leftText}>{this.props.title}</Text>
						{/*判断并创建右侧部分*/}
						{this.createRightPart()}
					</View>
				</TouchableOpacity>
				{/*判断并创建底部线条*/}
				{this.createBottomLine()}
			</View>
		)
	}


	// 判断并创建右侧部分
	createRightPart = () => {
		if (this.props.isSwitch) {
			return (
				<Switch value={this.state.switchValue}
				        onValueChange={() => this.switchValueChangded(this.state.switchValue)}/>
			)
		} else {
			if (this.props.rightTitle.length > 0) {
				return (
					// 右侧视图view
					<View style={styles.rightView}>
						<Text style={styles.rightTitle}>{this.props.rightTitle}</Text>
						<Image source={LFImages.icon_cell_rightArrow} style={styles.rightArrow}/>
					</View>
				)
			} else {
				return (
					<Image source={LFImages.icon_cell_rightArrow} style={styles.rightArrow}/>
				)
			}


		}
	}


	// 改变按钮状态
	switchValueChangded(vale) {
		this.setState({
			switchValue: !vale,
		})
	}

	createBottomLine = () => {
		if (this.props.isBottomLine) {
			return <View style={styles.bottomLine}></View>
		}
		else {
			return (
				null
			)
		}
	}


}

//**************************************** 样式部分 ****************************************//

const styles = StyleSheet.create({

	// cell主体内容视图样式
	cellContainer: {
		backgroundColor: LFColors.cellBackgroundColor,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
		width: ScreenW,
		height: ScreenFixH(48),
		paddingRight: ScreenFixW(15),
		paddingLeft: ScreenFixW(15),
	},
	// 左边文字样式
	leftText: {
		fontSize: 17,
		color: LFColors.textCellColor
	},

	// 右边视图样式
	rightView: {
		flexDirection: 'row',
		alignItems: 'center',
	},

	// 右边文字样式
	rightTitle: {
		fontSize: 13,
		color: LFColors.textCellColorleft,
	},
	// 右边箭头样式
	rightArrow: {
		width: ScreenFixW(10),
		height: ScreenFixW(10),
	},
	// 底部线条样式
	bottomLine: {
		backgroundColor: LFColors.bottomLineColor,
		width: ScreenW - ScreenFixW(15),
		marginLeft: ScreenFixW(15),
		height: 1,
		marginTop: -1,
	},


})